<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>

		<script type="text/javascript">
			let mCharts = echarts.init(document.querySelector('div'));
			let xData=['张三','李四','王五','闰土','小明','三看','大强']
			let yData=[84,43,68,79,90,98,57]
			let option = {
				title:{
					text:'成绩展示',
					textStyle:{
						color:'red'
					}
				},
				//提示框组件，用于配置鼠标滑过或点击图表时的显示框
				tooltip:{
					//触发类型 选项item 轴axis
					// trigger:'item'					
					trigger:'axis',
					//触发时机 mouseover click
					triggerOn:'click',
					//提示内容格式
					// formatter:'{b} 的成绩是: {c}'
					formatter:function(arg){
						console.log(arg);
						return arg[0].name+' 的成绩是: '+arg[0].data
					}

				},
				xAxis: {
					type: 'category', 
					data: xData,
				},
				yAxis: {
					type: 'value', 
				},
				series: [
					{
						name: '语文',
						type: 'bar', 
						data: yData,
					},
				],
			};
			mCharts.setOption(option);
		</script>
	</body>
</html>
